import type React from 'react';
import {
  attachPolygon,
  detachPolygon,
  getPolygon,
} from '@/components/MapView/Mapless/mana/polygon';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onDrawPolygon = () => {
    const pMan = attachPolygon(maplessRef.current, 'pm1');
    pMan?.drawPolygon('polygon1', {
      coordinates: [
        [113.266, 23.131],
        [113.276, 23.141],
        [113.277, 23.122],
        [113.266, 23.131],
      ],
      fillColor: 'rgba(255,0,0,0.1)',
    });
    pMan?.drawPolygon('polygon2', {
      coordinates: [
        [113.25, 23.12],
        [113.26, 23.12],
        [113.26, 23.13],
        [113.25, 23.13],
        [113.25, 23.12],
      ],
      fillColor: 'rgba(255,0,0,0.1)',
    });
  };

  const onUpdatePolygon = () => {
    const pMan = getPolygon(maplessRef.current, 'pm1');
    pMan?.drawPolygon('polygon1', {
      coordinates: [
        [113.266, 23.131],
        [113.276, 23.141],
        [113.287, 23.127],
        [113.266, 23.131],
      ],
      fillColor: '#ff0000',
      fillOpacity: 0.3,
    });
  };

  const onShowPolygon = () => {
    const pMan = getPolygon(maplessRef.current, 'pm1');
    pMan?.setVisible(!pMan.IsVisible);
  };

  const onClearPolygon = () => {
    detachPolygon(maplessRef.current, 'pm1');
  };

  return (
    <div className={styles.test}>
      <button type="button" onClick={onDrawPolygon}>
        绘制多边形
      </button>
      <button type="button" onClick={onUpdatePolygon}>
        更新多边形
      </button>
      <button type="button" onClick={onShowPolygon}>
        显示/隐藏
      </button>
      <button type="button" onClick={onClearPolygon}>
        清除多边形
      </button>
    </div>
  );
};

export default Index;
